import { Canvas, Chart, Interval, Axis, TextGuide } from "@antv/f2";
import styles from "./boxs.css";
import { BOX1_NAME } from "../../constants/index";
import { useEffect } from "react";

export function Box1({ hasTitle = true }) {
  const data1 = [
    {
      type: "科室上线数量",
      count: 15,
    },
    {
      type: "科室数量",
      count: 20,
    },
  ];
  const data2 = [
    {
      type: "使用人员数量",
      count: 24,
    },
    {
      type: "人员数量",
      count: 74,
    },
  ];
  useEffect(() => {
    const context1 = document.getElementById("Box1-1")?.getContext("2d");
    const context2 = document.getElementById("Box1-2")?.getContext("2d");
    if (!context1 || !context2) return
    const { offsetHeight: offsetHeight1, offsetWidth: offsetWidth1 } = context1?.canvas;
    const { offsetHeight: offsetHeight2, offsetWidth: offsetWidth2 } = context1?.canvas;
    const { props: props1 } = (
      <Canvas context={context1} pixelRatio={window.devicePixelRatio}>
        <Chart
          data={data2}
          coord={{
            transposed: true,
          }}
          style={{ width: offsetWidth1 * 0.8, top: -10 }}
        >
          {/* <Axis
            field="type"
            position="top"
            style={{
              label: { textAlign: "right" },
              line: { visibility: 0 },
              grid: { visibility: 0 },
            }}
          /> */}
          <Interval
            animation={{
              appear: {
                duration: 500,
                property: ["width"],
                start: {
                  width: 0,
                },
                end: {
                  width: undefined,
                },
              },
            }}
            x="type"
            y="count"
            style={{
              fill: {
                transform: 'scale(1.2)',
                image:
                  "",
              },
            }}
          />
          {data2.map((item) => {
            const { count, type } = item;
            return (
              <TextGuide
                key={type}
                records={[item]}
                content={`${count}`}
                style={{
                  fill: "#deffff",
                  fontSize: "24px",
                }}
                offsetX={6}
              />
            );
          })}
          <text
            style={{
              text: "占比",
              x: offsetWidth2 * 0.85,
              y: offsetHeight2 * 0.5,
              fill: "#deffff",
            }}
          ></text>
          <text
            style={{
              text: "25%",
              x: offsetWidth2 * 0.85,
              y: offsetHeight2 * 0.5 - 14,
              fill: "#02cf91",
            }}
          ></text>
        </Chart>
      </Canvas>
    );
    const { props: props2 } = (
      <Canvas context={context2} pixelRatio={window.devicePixelRatio} >
        <Chart
          data={data1}
          coord={{
            transposed: true,
          }}
          style={{ width: offsetWidth1 * 0.8, top: 16 }}
        >
          {/* <Axis
        field="type"
        position="top"
        style={{
          labelOffset: 2,
          label: { textAlign: "right" },
          line: { visibility: 0 },
          grid: { visibility: 0 },
        }}
      /> */}
          <Interval
            animation={{
              appear: {
                duration: 500,
                property: ["width"],
                start: {
                  width: 0,
                },
                end: {
                  width: undefined,
                },
              },
            }}
            x="type"
            y="count"
            style={{
              fill: {
                transform: 'scale(1.2)',
                image:
                  "",
              },
            }}
          />
          {data1.map((item) => {
            const { count, type } = item;
            return (
              <TextGuide
                key={type}
                records={[item]}
                content={`${count}`}
                style={{
                  fill: "#deffff",
                  fontSize: "24px",
                }}
                offsetX={6}
              />
            );
          })}
          <text
            style={{
              text: "占比",
              x: offsetWidth1 * 0.85,
              y: offsetHeight1 * 0.5 + 10,
              fill: "#deffff",
            }}
          ></text>
          <text
            style={{
              text: "75%",
              x: offsetWidth1 * 0.85,
              y: offsetHeight1 * 0.5 - 4,
              fill: "#02cf91",
            }}
          ></text>
        </Chart>
      </Canvas>
    )
    const chart1 = new Canvas(props1);
    const chart2 = new Canvas(props2);
    chart1.render();
    chart2.render();
  }, []);
  const style_canvas = {
    height: 'calc(var(--cancas-height) / 2)', maxHeight: 'calc(var(--max-cancas-height) / 2)'
  }
  return (
    <div className={styles.box}>
      {hasTitle && <div className={styles.title}>{BOX1_NAME}</div>}
      <canvas className={styles.main} style={style_canvas} id="Box1-2"></canvas>
      <canvas className={styles.main} style={style_canvas} id="Box1-1"></canvas>
    </div>
  );
}
